<!DOCTYPE HTML>
<html lang="es">
	<head>
		<title>danigarcia.me | ChangeData</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<!-- Versión compilada y comprimida del CSS de Bootstrap -->
		<link rel="stylesheet" href="css/bootstrap.min.css">
	 
		<!-- Tema opcional -->
		<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	 
		<!-- Versión compilada y comprimida del JavaScript de Bootstrap -->
		<script src="js/bootstrap.min.js"></script>

		<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
		<style type="text/css"></style>
	 
	  
		<style type="text/css">
		    .mostrar:after{
		    	content: " (click para mostrar)";
			}

			.ocultar:after{
		    	content: " (click para ocultar)";
			}

		</style>
	  

		<script type="text/javascript">
			$(function(){
				$('.to_show').nextAll("div").toggle();
			    $('.to_show').click(function(){  
			        $(this).nextAll('div').toggle();
			        $(this).hasClass('mostrar')?($(this).attr("class", "ocultar")):($(this).attr("class", "mostrar"));
			    });
			})
		</script>

	</head>
	<body>
		<div class="container">
			<h1>Este es nuestro form</h1>
			<h2>Mola ¿eh?</h2>
		</div>
		<div class="container">
			<div class="col-md-8" style="margin:auto;float:none">
				<form id="main_form" role="form">
					<fieldset>
						<legend>Clase</legend>
						<div class="row">
							<div class="form-group col-md-5 col-md-offset-1"> 
								<label>¿Qué asignatura quieres cambiar?<br>

									<datalist id="subject_datalist">
										<option label="EVAF" value="EVAF">
										<option label="Bioquímica" value="Bioquímica">
										<option label="Genética" value="Genética">
										<option label="Fisiología Animal" value="Fisiología Animal">
										<option label="Microbiología" value="Microbiología">
										<option label="FIB" value="FIB">
									</datalist>

									<input list="subject_datalist" class="form-control" placeholder="Asignatura" id="lista_asignaturas"/>
								</label>
							</div>
							<div class="form-group col-md-5">
								<label>¿Día y hora que quieres cambiar?<br>
									<input type="datetime-local" class="form-control" name="inDate" />
								</label>
							</div>
						</div>
						<div class="row">
							<div class="form-group col-md-10 col-md-offset-1" style="margin:auto;float:none;">
								<label>
									¿A qué día y hora la quieres cambiar? (opcional)<br>
									<input type="datetime-local" class="form-control" name="outDate" />
								</label>
							</div>
						</div>
					</fieldset>

					<fieldset id="fieldset_avanzado">
						<legend class="mostrar to_show" id="advanced">Opciones avanzadas</legend>
						<div class="row">
							<div class="form-group col-md-5 col-md-offset-1">
								<label>
									¿Por algún motivo en especial?<br>
									<input type="text" class="form-control" name="reason" placeholder="Motivo" />
								</label>
							</div>
							<div class="form-group col-md-6">
								<label>
									¿Toda la clase o tu seminario?<br>
									<datalist id="group">
										<option label="Clase" value="Clase">
										<option label="Seminario 1" value="Seminario 1">
										<option label="Seminario 2" value="Seminario 2">
									</datalist>
									<input list="group" class="form-control" placeholder="Grupo"/>
								</label>
								<br>
							</div>
						</div>
					</fieldset>

					<fieldset id="fieldset_personal">
						<legend>Datos personales</legend>
						<div class="row">
							<div class="form-group col-md-5 col-md-offset-1">
								<label>
									Nombre y 1<sup>er</sup> Apellido
									<input type="text" class="form-control" placeholder="Nombre y apellido">
								</label>
							</div>
							<div class="form-group col-md-6">
								<label>
									Correo electrónico (usal)
									<input type="email" class="form-control" placeholder="example@usal.es">
								</label>
							</div>
						</div>
					</fieldset>	
					<div class="checkbox">
				    <label>
				      <input type="checkbox"> He leído y estoy de acuerdo con las condiciones de uso.
				    </label>
				  </div>
					<input type="submit" class="btn btn-default" label="Enviar">
				</form>
			</div>
		</div>
		
	</body>
</html>